<!---键盘事件测试-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="keybord">
        <input type="text" placeholder="按住回车键输出文本框里的内容" @keyup.enter="showMsg1"></input>
        <!--ctrl+其它键触发的情况 ctrl+y触发事件-->
        <input type="text" placeholder="按住回车键输出文本框里的内容" @keyup.ctrl.y="showMsg2"></input>
    </div>
    <!--
    1.Vue中常用的按键别名:
        回车 =>enter
        删除 =>delete(捕荻“删除”和“退格”健)
        退出 =>esc
        空格 =>space
        换行 =>tab
        上=> up
        F=>down
        左 =>left
        右=>right
        2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
        3.系统修饰键(用法特殊):ctrl、alt、shift、meta
            (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
            (2).配合keydown使用:正常触发事件。
        4.也可以使用keyCode去指定具体的按键(不推荐)
        5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
    -->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#keybord',
            data: function(){
                return{

                }
            },
            methods:{
                showMsg(event){
                    //当按下回车键时才获取文本框中的内容(最原始的实现方式)
                    if(event.keyCode != 13) return
                    console.log("文本框输入的值为："+event.target.value)
                    console.log("输入键的key值为："+event.key);
                    console.log("输入键的key编号值为："+event.keyCode);  
                },
                showMsg1(event){
                    alert(event.target.value)
                },
                showMsg2(event){
                    alert(event.target.value)
                }
            }
        })
    </script>
     
</body>
</html>